<template>
   <div class="module-box">
      <div style="flex:0 1 25%">
        <dv-border-box-9 style="width:100%;height:238px;">
          <!-- 动态环图 -->
          <!-- <dv-active-ring-chart :config="config4" style="width:100%;height:260px;" /> -->
          <BarChart :barData = 'barViewData' style="width:100%;height:260px;"></BarChart>
        </dv-border-box-9>
        <dv-border-box-9 style="width:100%;height:238px;">
          <!-- 动态环图 -->
          <!-- <dv-active-ring-chart :config="config4" style="width:100%;height:260px;" /> -->
          <LineChartVue :viewData = 'lineViewData'  style="width:100%;height:260px;"></LineChartVue>
        </dv-border-box-9>
      </div>

      
      <div style="flex:0 1 50%;">
        <dv-border-box-1 style="width:100%;height:480px;">
          <dv-flyline-chart :config="config5" style="width:100%;height:480px;" />
        </dv-border-box-1>
      </div>

      
      <div style="flex:0 1 25%">
        <dv-border-box-9 style="width:100%;height:238px;">
          <!-- 动态环图 -->
          <dv-active-ring-chart :config="config4" style="width:100%;height:260px;" />
        </dv-border-box-9>
        <dv-border-box-9 style="width:100%;height:238px;">
          <!-- 动态环图 -->
          <dv-active-ring-chart :config="config6" style="width:100%;height:260px;" />
        </dv-border-box-9>
      </div>
    </div>
</template>
<script>
import LineChartVue from '@/charts/LineChart.vue'
import BarChart from '@/charts/BarChart.vue' 
import {getLineChartData} from '../api/LineChart'
import {getBarChartData} from '../api/BarChart'

export default {
    name: 'BottonMain',
    components: {
    LineChartVue,
    BarChart
  },
   data() {
      return {
        lineViewData:{
        data:[],
        date:[]
      },
      barViewData:{
        data:[],
        date:[]
      },
      config4:{
      data: [
  {
    "name": "短袖",
    "value": 1
  },
  {
    "name": "短裤",
    "value": 2
  },
  {
    "name": "牛仔裤",
    "value": 3
  },
  {
    "name": "短裙",
    "value": 4
  },
  {
    "name": "短袜",
    "value": 5
  },
  {
    "name": "长裙",
    "value": 6
  },
  {
    "name": "衬衫",
    "value": 7
  }
]
    },
    
      config6:{
      data: [
  
  {
    "name": "短裙",
    "value": 4
  },
  {
    "name": "短袜",
    "value": 5
  },
  {
    "name": "长裙",
    "value": 6
  },
  {
    "name": "衬衫",
    "value": 7
  }
]
    },

    config5:{centerPoint: [0.48, 0.35],
      points: [
    {
      position: [0.52, 0.235],
      text: '新乡'
    },
    {
      position: [0.43, 0.29],
      text: '焦作'
    },
    {
      position: [0.59, 0.35],
      text: '开封'
    },
    {
      position: [0.53, 0.47],
      text: '许昌'
    },
    {
      position: [0.45, 0.54],
      text: '平顶山'
    },
    {
      position: [0.36, 0.38],
      text: '洛阳'
    },
    {
      position: [0.62, 0.55],
      text: '周口'
    },
    {
      position: [0.56, 0.56],
      text: '漯河'
    },
    {
      position: [0.37, 0.66],
      text: '南阳'
    },
    {
      position: [0.55, 0.81],
      text: '信阳'
    },
    {
      position: [0.55, 0.67],
      text: '驻马店'
    },
    {
      position: [0.37, 0.29],
      text: '济源'
    },
    {
      position: [0.20, 0.36],
      text: '三门峡'
    },
    {
      position: [0.76, 0.41],
      text: '商丘'
    },
    {
      position: [0.59, 0.18],
      text: '鹤壁'
    },
    {
      position: [0.68, 0.17],
      text: '濮阳'
    },
    {
      position: [0.59, 0.10],
      text: '安阳'
    }
  ],
        bgImgUrl: require('../assets/img/map.jpg'),
        flylineColor:'#fff',
        centerPointImg: {
          url:  require('../assets/img/mapCenterPoint.png')
        },
        pointsImg: {
          url:  require('../assets/img/mapPoint.png')
        }
      },
      timer: null // 添加一个变量来保存定时器
      }
   },

  

   methods:{
    
    getData(){
      getLineChartData().then(res=>{
      this.lineViewData = res;
      
     }).catch((e) => {console.log(e)});
     getBarChartData().then(res=>{
      this.barViewData = res;
      
     }).catch((e) => {console.log(e)});
   }
   },
   created() {
    this.getData();
   },
   mounted() {
    // 设置定时器，每10秒调用一次getData方法
    this.timer = setInterval(() => {
      this.getData();
    }, 10000);
   },
   beforeDestroy() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
   },
}
</script>
<style>

</style>
